import React, { PureComponent } from "react"
import { connect } from "react-redux"
import Swiper from "@/components/main/index/section/swiper"
import { Hotsr } from "@/components/main/index/section/styled"
import { loadHotsrecommendAsync } from "@/components/main/index/actionCreator"

class HotsRecommend extends PureComponent {


    render() {
        // console.log(this.props.hotsrecommendData);
        // console.log(this.props);

        return this.props.hotsrecommendData.length !== 0 ? (
            <Hotsr>
                <div>
                    <p className="title_program">{'热门演出'}</p>
                </div>
                <Swiper height={"200px"} swiperConfig={{ slidesPerView: 3 }}>
                    {
                        this.props.hotsrecommendData.map((item, index) => (

                            <div className="swiper-slide" key={index} >
                                <img src={item.pic} style={{ height: "145px", width: "106px" }} alt="" />
                                <p>{item.show_name}...</p>
                            </div>
                        ))
                    }
                </Swiper>
            </Hotsr>
        ) : (null)
    }
    componentDidMount() {
        this.props.pageInit.bind(this)()
    }
}



const mapStateToProps = (state) => {
    return {
        title: state.getIn(['indexReducer', 'hotsrecommendData', "title"]),
        currentCity: state.getIn(['indexReducer', 'currentCity']).toJS(),
        hotsrecommendData: state.getIn(["indexReducer", "hotsrecommendData"]).toJS()

    }
}
const mapDispatchToProps = (dispatch) => ({
    pageInit() {
        dispatch(loadHotsrecommendAsync(dispatch, this.props.currentCity.city_id))
    },

})
export default connect(mapStateToProps, mapDispatchToProps)(HotsRecommend)



